<template>
  <div id="newsForm">
    <el-form label-width="100px" class="form" style="text-align: left">
      <el-form-item label="封面上传">
        <label for="file" class="file" ref="file"><i class="el-icon-plus"></i></label>
        <input type="file" id="file" @change="getFile($event)" style="visibility: hidden;height: 1px"/>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="formData.content.title"></el-input>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="formData.publishTime"
                        type="datetime"
                        placeholder="选择发布时间"
                        align="right">
        </el-date-picker>
      </el-form-item>
       <el-form-item label="选择图形">
        <el-radio class="radio" v-model="formData.isBigImg" :label="0">大图</el-radio>
        <el-radio class="radio" v-model="formData.isBigImg" :label="1">小图</el-radio>
      </el-form-item>
      <el-form-item label="公布范围">
        <el-radio class="radio" v-model="formData.scope" :label="0">所有用户</el-radio>
        <el-radio class="radio" v-model="formData.scope" :label="1">指定用户</el-radio>
        <el-input v-model="formData.assignPhone"></el-input>
      </el-form-item>
      <el-form-item label="文章作者">
        <el-input v-model="formData.content.author"></el-input>
      </el-form-item>
      <el-form-item label="阅读量">
        <el-input v-model="formData.readCount"></el-input>
      </el-form-item>
      <el-form-item label="点赞量">
        <el-input v-model="formData.goodCount"></el-input>
      </el-form-item>
      <quill-editor v-model="formData.content.content">
      </quill-editor>
      </el-form-item>
      <el-form-item label="已选择标签">
        <el-tag
                v-for="tag in formData.tagList"
                :key="tag.name"
                :data-msg="tag.id"
                :closable="true"
                class="tagstyle"
                @close="handleClose(tag)">
          {{tag.name}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      </el-form-item>
      <el-form-item label="常用标签">
        <ul style="overflow: hidden">
          <li v-for="(tag, index) in tags"
              class="tagstyle"
              :data-sort="index"
              @click="chooseTag($event)">
                {{tag.name}}
          </li>
        </ul>
      </el-form-item>
      <el-form-item label="相关文章推荐">
        <el-radio class="radio" v-model="formData.openRelated" :label="0">开启</el-radio>
        <el-radio class="radio" v-model="formData.openRelated" :label="1">关闭</el-radio>
      </el-form-item>
      <input type="hidden" name="token" v-model="formData.token">
      <el-button type="primary" @click=submitForm>提交</el-button>
    </el-form>
  </div>
</template>
<script>
  import axios from 'axios'
  import { quillEditor } from 'vue-quill-editor'
  export default{
    name: 'newsForm',
    data () {
      return {
        formData: {
          file: '',
          infoId: '',
          infoMainImg: '',
          infoTitle: '',
          publishTime: '',
          isBigImg: 0,
          scope: 0,
          assignPhone: '',
          readCount: 0,
          goodCount: 0,
          tagList: [],
          openRelated: 0,
          clsId: 124,
          draftId: '',
          content: {
            author: '',
            content: ''
          }
        },
        form_token: '',
        tags: [],
        inputVisible: false,
        inputValue: ''
      }
    },
    components: {
      quillEditor
    },
    created () {
      this.getFormToken()
      this.getTag()
      this.getNewsInfo(650)
    },
    methods: {
      getFile (event) {
        this.formData.file = event.target.files[0]
        var reader = new FileReader()
        reader.readAsDataURL(this.formData.file)
        var that = this
        reader.onload = function (event) {
          console.log(that.$refs.file)
          that.$refs.file.innerHTML = '<img src="' + this.result + '" alt=""/>'
          // $('#result').html('<img src="'+this.result+'" alt=""/>' )
        }
      },
      getNewsInfo (id) {
        axios({
          url: this.$store.state.baseURI + 'oss/info/view',
          method: 'GET',
          params: {id: id, token: this.$store.state.token}
        }).then(obj => {
          if (obj.data.code === 100) {
            this.formData = obj.data.data
          }
        })
      },
      submitForm () {
        var formData = new FormData()
        var that = this
        formData.append('token', this.$store.state.token)
        formData.append('form_token', this.form_token)
        formData.append('id', this.formData.infoId)
        formData.append('cls_id', this.formData.clsId)
        formData.append('draft_id', this.formData.clsId)
        formData.append('file', this.formData.file)
        formData.append('title', this.formData.infoTitle)
        formData.append('publish_time', this.formatTime(this.formData.publishTime))
        formData.append('is_big_img', this.formData.isBigImg)
        formData.append('scope', this.formData.scope)
        formData.append('assign_phone', this.formData.assignPhone)
        formData.append('author', this.formData.author)
        formData.append('read_count', this.formData.readCount)
        formData.append('good_count', this.formData.goodCount)
        formData.append('open_related', this.formData.openRelated)
        formData.append('tags', this.formData.tags)
        formData.append('content', this.formData.content1)
        var xhr = new XMLHttpRequest()
        if (this.formData.infoId === '') xhr.open('POST', this.$store.state.baseURI + 'oss/info/add')
        else xhr.open('POST', this.$store.state.baseURI + 'oss/info/update')
        xhr.onload = function (event) {
          if (xhr.status === 200) {
            var obj = JSON.parse(xhr.responseText)
            if (obj.code === 100) {
              that.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              that.$message.error(obj.message)
            }
          }
        }
        xhr.send(formData)
      },
      getTag () {
        axios({
          url: this.$store.state.baseURI + 'oss/info/tag/list',
          method: 'GET',
          params: {token: this.$store.state.token}
        }).then(obj => {
          console.log(obj)
          if (obj.data.code === 100) {
            this.tags = obj.data.data
          }
        })
      },
      chooseTag (event) {
        var sort = Math.floor(event.target.getAttribute('data-sort'))
        if (!this.inArray(this.tags[sort], this.formData.tags)) this.formData.tags.push(this.tags[sort])
      },
      inArray (item, array) {
        var i = array.length
        while (i--) {
          if (array[i].id === item.id) return true
        }
        return false
      },
      handleClose (tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      },

      showInput () {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },

      handleInputConfirm () {
        let inputValue = this.inputValue
        if (inputValue) {
          this.dynamicTags.push(inputValue)
        }
        this.inputVisible = false
        this.inputValue = ''
      }
    }
  }
</script>
<style>
#newsForm > .form{
  width: 640px;
  margin: 0 auto;
}
#newsForm .file{
  display: inline-block;
  width: 540px;
  height: 100px;
  border: 1px solid #c1cbd9;
  border-radius: 4px;
  text-align: center;
  font-size: 20px;
  line-height: 100px;
  color: #c1cbd9;
  cursor: pointer;
  margin-bottom: -40px;
  background: #fff;
}
#newsForm .file > img{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.tagstyle{
  margin-right: 8px;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  border-radius: 4px;
  padding: 0px 12px;
  border: 1px solid #c1cbd9;
}
</style>
